<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 Demo</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <style>
    #body {
      margin: 0 auto;
      width: 500px;
      height: 400px;
      background-color: #efefef;
      position: relative;
    }
    .bar {
      width: 30px;
      background-color: green;
      bottom: 10px;
      position: absolute;
    }
    .bar span {
      display: block;
      text-align: center;
    }
  </style>
</head>
<body >
  <svg width="500" height="500" style="background-color: #efefef;">
    <!-- <rect x="50" y="100" width="100" height="50" fill="red"  stroke="blue" stroke-width="5" /> -->
    <!-- <ellipse cx="200" cy="200" rx="50" ry="100" style="fill: orange; stroke:orangered;stroke-width: 5px"></ellipse> -->
    <!-- <circle
      cx="225"
      cy="225"
      r="200"
      style="fill:peru"
    ></circle> -->
    <!-- <polygon
      points="10,20 150,60 120,200 100,200"
      style="fill:pink"
    ></polygon> -->
    <!-- <polyline
      points="10,20 150,160 320,400 200,300"
      stroke = "red"
      fill="none"
    ></polyline> -->
    <!-- <path 
      d="M30,30 L200,200 L230,260"
      stroke="red"
      stroke-width="20"
      fill="none"
    ></path> -->
    <!-- <defs>

      <g id="group">
        <rect x="50" y="100" width="100" height="50" style="fill:green;" stroke="blue" stroke-width="5">

          <animate attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
        </rect>
        <circle cx="225" cy="225" r="100" style="fill:peru;">

          <animate attributeName="cx" from="225" to="100" dur="5s" repeatCount="indefinite" />
        </circle>
      </g>

    </defs> 
    <use xlink:href="#group" x="30" y="30" /> -->
    <text x="200" y="200" style="fill: none; stroke: red; stroke-width: 1; font-size: 45px;">SZGP04</text>
    <clipPath id="myClipPath">
      <rect width="200" height="100" x="200" y="200"></rect>
    </clipPath>
    <circle cx="260" clip-path="url(#myClipPath)" cy="260" r="100" style="" />
  </svg>
  <script src="app.js"></script>
</body>
</html>